<template>
    <div class="container">
        <div class="handle-box">
            <el-form ref="form" :model="form" label-width="120px" class="flex">
                <el-form-item label="垃圾点类型：">
                    <el-input v-model="form.name" placeholder="请输入类型" class="handle-input mr10" @input="mohu()"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search">搜索</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="handleAdd()">新增</el-button>
                    <el-button type="primary" @click="exportToExcel()" style="background: #409eff; border: 1px solid #409eff"
                        >导出列表</el-button
                    >
                </el-form-item>
            </el-form>

            <el-upload
                action="/上传文件的接口"
                :on-change="onChange"
                :auto-upload="false"
                :show-file-list="false"
                accept=".xls, .xlsx"
                class="upload"
            >
                <el-button type="warning" icon="el-icon-folder-add" style="width: 97px; height: 33px">导入列表</el-button>
            </el-upload>
        </div>
        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)">
            <el-table-column type="index" label="ID" width="55" align="center"></el-table-column>
            <el-table-column prop="NAME" label="垃圾点名称"></el-table-column>
            <el-table-column prop="STREET_NAME" label="所属街道"></el-table-column>
            <el-table-column prop="COMMUNITY_NAME" label="所属社区"></el-table-column>
            <el-table-column prop="VILLAGE_NAME" label="所属小区"></el-table-column>
            <el-table-column prop="LONGITUDE" label="经度" :formatter="lonFormatter"></el-table-column>
            <el-table-column prop="LATITUDE" label="纬度" :formatter="latFormatter"></el-table-column>
            <el-table-column prop="TYPE" label="类型"></el-table-column>
            <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="text" icon="el-icon-picture" @click="handleEditImage(scope.$index, scope.row)">上传照片</el-button>
                    <el-button type="text" @click="handleDelete(scope.$index, scope.row)" style="color: red">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="tableData.length"
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
        <el-dialog :before-close="closeDialogImage" v-dialogDrag title="上传照片" :visible.sync="uploadImagedialog" width="50%">
            <el-form ref="updataImageform" :model="updataImageform" label-width="100px" class="display">
                <el-form-item>
                    <el-upload
                        ref="upload"
                        class="upload-demo"
                        action="http://111.160.78.62:5578/UpLoadImageFiles?src=01900/垃圾点"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        :auto-upload="false"
                        :file-list="addfileList"
                        :before-upload="handleBeforeUpload"
                        list-type="picture"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                    <el-button style="margin-top: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 新增垃圾点弹出框 -->
        <el-dialog v-dialogDrag title="新增垃圾点" :visible.sync="addVisible" width="50%" :before-close="closeDialogAdd">
            <el-form ref="addform" :model="addform" label-width="100px" class="display">
                <el-form-item label="地区：" class="wid33">
                    <el-select v-model="addform.REGION_ID" placeholder="请选择地区" :label-width="labelwidth" @change="changeStreet">
                        <el-option
                            v-for="item in clientNameOpts"
                            :key="item.REGION_ID"
                            :label="item.REGION_NAME"
                            :value="item.REGION_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="街道：" class="wid33">
                    <el-select v-model="addform.STREET_ID" placeholder="请选择街道" :label-width="labelwidth" @change="changeCommunity">
                        <el-option
                            v-for="item in streetOpts"
                            :key="item.STREET_ID"
                            :label="item.STREET_NAME"
                            :value="item.STREET_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="社区：" class="wid33">
                    <el-select v-model="addform.COMMUNITY_ID" placeholder="请选择" :label-width="labelwidth" @change="changePlot">
                        <el-option
                            v-for="item in communityOpts"
                            :key="item.COMMUNITY_ID"
                            :label="item.COMMUNITY_NAME"
                            :value="item.COMMUNITY_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="小区：" class="wid33">
                    <el-select v-model="addform.VILLAGE_ID" placeholder="请选择" :label-width="labelwidth">
                        <el-option
                            v-for="item in plotOpts"
                            :key="item.VILLAGE_ID"
                            :label="item.VILLAGE_NAME"
                            :value="item.VILLAGE_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="详细位置：" class="wid33">
                    <el-input v-model="addform.name" :label-width="labelwidth" placeholder="如：*号楼*门"></el-input>
                </el-form-item>
                <el-form-item label="经度：" class="wid33">
                    <el-input v-model="addform.longitude" :label-width="labelwidth"></el-input>
                </el-form-item>
                <el-form-item label="纬度：" class="wid33">
                    <el-input v-model="addform.latitude" :label-width="labelwidth"></el-input>
                </el-form-item>
                <el-form-item label="类型：" class="wid33">
                    <el-select v-model="addform.type" placeholder="请选择垃圾桶类型">
                        <el-option label="智能房" value="智能房"></el-option>
                        <el-option label="智能亭" value="智能亭"></el-option>
                        <el-option label="普通房" value="普通房"></el-option>
                        <el-option label="普通亭" value="普通亭"></el-option>
                        <el-option label="普通桶" value="普通桶"></el-option>
                    </el-select>
                </el-form-item>
                <div class="line"></div>
                <el-form-item class="list-wrap">
                    <el-button type="success" class="btn" @click="edittable">新增一行</el-button>
                    <el-table :data="editbiaog" style="width: 100%">
                        <el-table-column prop="BOX_NAME" label="垃圾桶名称" width="180"></el-table-column>
                        <el-table-column prop="BOX_TYPE" :formatter="typeFormatter" label="垃圾桶类型" width="180"></el-table-column>
                        <el-table-column prop="SIZE" label="垃圾桶重量"></el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            :total="editbiaog.length"
                            @size-change="handleSizeChangeedit"
                            @current-change="handlePageChangeedit"
                        ></el-pagination>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialogAdd('手动')">取 消</el-button>
                <el-button type="primary" @click="succadd(addform)">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑垃圾点弹出框 -->
        <el-dialog v-dialogDrag title="编辑垃圾点" :visible.sync="editVisible" width="50%" :before-close="closeDialogEdit">
            <el-form ref="editform" :model="editform" label-width="100px" class="display">
                <el-form-item label="地区：" class="wid33">
                    <el-select v-model="editform.CLIENT_NAME" placeholder="请选择地区" :label-width="labelwidth" @change="changeStreet">
                        <el-option
                            v-for="item in clientNameOpts"
                            :key="item.REGION_ID"
                            :label="item.REGION_NAME"
                            :value="item.REGION_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="街道：" class="wid33">
                    <el-select
                        v-model="editform.STREET_NAME"
                        placeholder="请选择街道"
                        :label-width="labelwidth"
                        @change="changeCommunity"
                    >
                        <el-option
                            v-for="item in streetOpts"
                            :key="item.STREET_ID"
                            :label="item.STREET_NAME"
                            :value="item.STREET_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="社区：" class="wid33">
                    <el-select v-model="editform.UNIT_NAME" placeholder="请选择" :label-width="labelwidth" @change="changePlot">
                        <el-option
                            v-for="item in communityOpts"
                            :key="item.COMMUNITY_ID"
                            :label="item.COMMUNITY_NAME"
                            :value="item.COMMUNITY_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="小区：" class="wid33">
                    <el-select v-model="editform.VILLAGE_NAME" placeholder="请选择" :label-width="labelwidth">
                        <el-option
                            v-for="item in plotOpts"
                            :key="item.VILLAGE_ID"
                            :label="item.VILLAGE_NAME"
                            :value="item.VILLAGE_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="详细位置：" class="wid33">
                    <el-input v-model="editform.NAME" :label-width="labelwidth" placeholder="如：*号楼*门"></el-input>
                </el-form-item>
                <el-form-item label="经度：" class="wid33">
                    <el-input v-model="editform.LONGITUDE" :label-width="labelwidth"></el-input>
                </el-form-item>
                <el-form-item label="纬度：" class="wid33">
                    <el-input v-model="editform.LATITUDE" :label-width="labelwidth"></el-input>
                </el-form-item>
                <el-form-item label="类型：" class="wid33">
                    <el-select v-model="editform.TYPE" placeholder="请选择垃圾桶类型">
                        <el-option label="智能房" value="智能房"></el-option>
                        <el-option label="智能亭" value="智能亭"></el-option>
                        <el-option label="普通房" value="普通房"></el-option>
                        <el-option label="普通亭" value="普通亭"></el-option>
                        <el-option label="普通桶" value="普通桶"></el-option>
                    </el-select>
                </el-form-item>
                <div class="line"></div>
                <el-form-item class="list-wrap">
                    <el-button type="success" class="btn" @click="edittable">新增一行</el-button>
                    <el-table :data="editbiaog" style="width: 100%">
                        <el-table-column prop="BOX_NAME" label="垃圾桶名称" width="180"></el-table-column>
                        <el-table-column prop="BOX_TYPE" :formatter="typeFormatter" label="垃圾桶类型" width="180"></el-table-column>
                        <el-table-column prop="SIZE" label="垃圾桶重量"></el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            :total="editbiaog.length"
                            @size-change="handleSizeChangeedit"
                            @current-change="handlePageChangeedit"
                        ></el-pagination>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialogEdit('手动')">取 消</el-button>
                <el-button type="primary" @click="succedit(editform)">确 定</el-button>
            </span>
        </el-dialog>
        
        <!-- 新增/编辑垃圾点 新增一行垃圾桶弹出框-->
        <el-dialog v-dialogDrag title="新增垃圾桶" :visible.sync="edittabledialog" width="50%">
            <el-form ref="edittableform" :model="edittableform" label-width="100px" class="display">
                <el-form-item label="垃圾桶名称" class="wid50">
                    <el-input v-model="edittableform.BOX_NAME" :label-width="labelwidth"></el-input>
                </el-form-item>
                <el-form-item label="垃圾桶类型" class="wid50">
                    <el-select v-model="edittableform.BOX_TYPE" placeholder="请选择" :label-width="labelwidth">
                        <el-option
                            v-for="item in boxTypeOpts"
                            :key="item.BOXTYPE_ID"
                            :label="item.BOXTYPE_NAME"
                            :value="item.BOXTYPE_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="垃圾桶重量" class="wid50">
                    <el-input v-model="edittableform.SIZE" :label-width="labelwidth"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="edittabledialog = false">取 消</el-button>
                <el-button type="primary" @click="edittablesuccess(edittableform)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import '../../assets/css/common.css';

export default {
  data () {
    return {
      currentPage: 1, // 初始页
      pageSize: 10, // 每页的数据
      labelwidth: '150',
      addVisible: false,
      editVisible: false,
      addform: {},
      editform: {},
      updataImageform: {},
      uploadImagedialog: false,
      addfileList: [],
      tableData: [],
      form: {
        name: ''
      },
      clientNameOpts: [],
      streetOpts: [],
      communityOpts: [],
      plotOpts: [],
      edittabledialog: false,
      edittableform: {
        BOX_NAME: '',
        BOX_TYPE: '',
        SIZE: ''
      },
      ImagePaths: '',
      boxTypeOpts: '',
      editbiaog: []
    }
  },
  created () {
    // 获取列表数据
    this.getListData();
    // 获取行政区
    this.getClientNameOpts();
    // 获取垃圾桶类型
    this.getBoxTypeOpts();
  },
  methods: {
    // 获取垃圾点列表数据
    async getListData () {
      const url = `${this.$url}/GetAllRubbishBoxApi?ClientNo=${localStorage.getItem("clentno")}&STREET_ID=&TYPE=`;
      const { data } = await this.$axios.get(url);
      this.tableData = [...data];
    },
    // 垃圾点列表分页
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
    },
    handleSizeChange (size) {
      this.pageSize = size;
    },
    // 经度转换
    lonFormatter (row, column) {
      return String(row.LONGITUDE).replace(/^(.*\..{5}).*$/, "$1")
      // var indexStart = row.LONGITUDE.indexOf('.')
      // return row.LONGITUDE.substring(indexStart + 5)
    },
    // 纬度转换
    latFormatter (row, column) {
      return String(row.LATITUDE).replace(/^(.*\..{5}).*$/, "$1")
      // var indexStart = row.LATITUDE.indexOf('.')
      // return row.LATITUDE.substring(indexStart + 5)
    },
    // 垃圾点类型模糊搜索
    mohu () {
      const name = this.form.name;
      let searchResultData = [];
      if(name) {
        this.tableData.filter(item => {
          if(item.NAME.indexOf(name) != -1){
            searchResultData.push(item)
          }
        })
      } else {
        this.getListData();
      }
      this.tableData = searchResultData;
    },
    // 获取行政区
    async getClientNameOpts () {
      const { data } = await this.$axios.get(`${this.$url}/GetRegionListApi`);
      this.clientNameOpts = data;
    },
    // 获取垃圾桶类型
    async getBoxTypeOpts () {
      const url = `${this.$url}/GetRubbishBoxTypeApi/`;
      const { data } = await this.$axios.get(url);
      this.boxTypeOpts = data;
    },
    // 导出列表功能
    exportToExcel () {
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/export2Excel');
        const tHeader = ['垃圾点名称', '所属街道', '所属社区', '所属小区', '经度', '纬度', '类型'];
        const filterVal = ['NAME', 'STREET_NAME', 'COMMUNITY_NAME', 'VILLAGE_NAME', 'LONGITUDE', 'LATITUDE', 'TYPE'];
        const list = this.tableData;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "垃圾点信息列表");
      });
    },
    // 导出列表转换数据格式
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    // 导入列表上传文件选择回调
    onChange (file, fileList) {
      //  console.log(fileList);
      this.fileData = file; // 保存当前选择文件
      this.readExcel(); // 调用读取数据的方法
    },
    // 导入列表上传文件读取数据
    readExcel (e) {
      let that = this;
      const files = that.fileData;
      console.log(files);
      if (!files) {
        //如果没有文件
        return false;
      } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }
      const fileReader = new FileReader();
      console.log(fileReader)
      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          //  console.log(ev.target)
          //  console.log(this);
          const workbook = this.XLSX.read(data, {
            type: "binary"
          });
          if (workbook.SheetNames.length >= 1) {
          }
          const wsname = workbook.SheetNames[0]; //取第一张表
          const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
          that.outputs = []; //清空接收数据
          let exceldata = []
          ws.filter(item => {
            var sheetData = {
              NAME: item['垃圾点名称'],
              STREET_NAME: item["所属街道"],
              COMMUNITY_NAME: item["所属社区"],
              VILLAGE_NAME: item['所属小区'],
              LONGITUDE: item['经度'],
              LATITUDE: item["纬度"],
              TYPE: item["类型"]
            }
            console.log(sheetData);
            exceldata.push(sheetData)
          })
          console.log(exceldata)
          this.$axios({
            //   url: this.$url + '/ImportPeopleApi',
            method: 'post',
            data: exceldata
          }).then(res => {
            console.log(res)
            if (res.data.IsSucess) {
              this.$message.success('导入成功')
              this.getlistdata()
            }
          })
          this.$refs.upload.value = "";
        } catch (e) {
          return false;
        }
      };
      // 如果为原生 input 则应是 files[0]
      fileReader.readAsBinaryString(files.raw);
    },
    // 上传照片
    async handleEditImage (index, row) {
      this.updataImageform = row;
      const url = `${this.$url}/GetRubbishImageApi?ID=${row.ID}`;
      const { data } = await this.$axios.get(url);
      this.addfileList = [...data];
      this.uploadImagedialog = true;
    },
    // 上传照片前
    handleBeforeUpload (file) {
      console.log(file)
      this.addform.ImagePaths += file.name + '|' + 'file/01900/垃圾点/' + file.name + ';'
      this.editform.ImagePaths += file.name + '|' + 'file/01900/垃圾点/' + file.name + ';'
      this.ImagePaths += file.name + '|' + 'file/01900/垃圾点/' + file.name + ';'
      console.log(this.ImagePaths)
      console.log('before')
      if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
        this.$notify.warning({
          title: '警告',
          message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
        })
      }
      let size = file.size / 1024 / 1024 / 2
      if (size > 2) {
        this.$notify.warning({
          title: '警告',
          message: '图片大小必须小于2M'
        })
      }
    },
    // 上传照片预览
    handlePreview (file) {
      console.log(file);
    },
    // 上传到服务器
    submitUpload () {
      this.$refs.upload.submit();
      this.succUpload();
    },
    // 上传到服务器成功后
    async succUpload () {
      this.updataImageform.PHOTO = this.ImagePaths;
      console.log(this.updataImageform)
      this.$axios({
        url: `${this.$url}/UpdateRubbishBoxApi`,
        method: 'post',
        data: this.updataImageform
      }).then(res => {
        if (res.data.IsSucess) {
          this.$message.success('编辑成功')
          this.uploadImagedialog = false
          this.updataImageform = Object.assign({}, undefined)
          this.getListData()
        }
      })
    },
    // 移除上传的照片前
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 移除上传的照片
    handleRemove (file, fileList) {
      // debugger
      this.$axios({
        // url: this.$url + '/DeletePeopleApi',
        url: this.$urlBase+ '/DeleteImageFiles',
        method: 'Delete',
        params: {
          src: '01900/垃圾点',
          fileName: file.name,
          files: this.ImagePaths
        }
      }).then(res => {
        console.log(res)
      })
      console.log(file, fileList);
    },
    // 关闭上传头像弹出框
    closeDialogImage (done) {
      this.addfileList = []
      this.updataImageform = Object.assign({}, undefined)
      done();
    },

    // 新增垃圾点
    handleAdd () {
      this.addVisible = true;
    },
    // 获取街道
    async changeStreet (val) {
      const { data } = await this.$axios.get(`${this.$url}/sreetListsApi?id=${val}`);
      this.streetOpts = data;
    },
    // 获取社区
    async changeCommunity (val) {
      const { data } = await this.$axios.get(`${this.$url}/communityListsApi?id=${val}`);
      this.communityOpts = data;
    },
    // 获取小区
    async changePlot (val) {
      const { data } = await this.$axios.get(`${this.$url}/villageListsApi?id=${val}`);
      this.plotOpts = data;
    },
    // 新增垃圾桶
    edittable () {
      this.edittabledialog = true;
    },
    // 新增垃圾桶提交
    edittablesuccess (edittableform) {
      this.$message.success('新增成功');
      this.editbiaog.push({
        BOX_NAME: edittableform.BOX_NAME,
        BOX_TYPE: edittableform.BOX_TYPE,
        SIZE: edittableform.SIZE
      })
      this.edittabledialog && (this.edittabledialog = false);
      this.edittableform = Object.assign({}, undefined)
      this.editform.boxs = Object.assign(this.editbiaog)
    },
    // 垃圾桶列表分页
    handlePageChangeedit (currentPage) {
      this.currentPage = currentPage;
    },
    handleSizeChangeedit (size) {
      this.pageSize = size;
    },
    // 垃圾桶类型转换
    typeFormatter (row, column) {
      var type = ''
      switch (row.BOX_TYPE) {
        case '1':
          type = '厨余垃圾'
          break;
        case '2':
          type = '有害垃圾'
          break;
        case '3':
          type = '其他垃圾'
          break;
        case '4':
          type = '可回收垃圾'
          break;
        case '5':
          type = '玻璃'
          break;
        case '6':
          type = '废纸'
          break;
        case '7':
          type = '金属'
          break;
        case '8':
          type = '塑料瓶'
          break;
        case 1:
          type = '厨余垃圾'
          break;
        case 2:
          type = '有害垃圾'
          break;
        case 3:
          type = '其他垃圾'
          break;
        case 4:
          type = '可回收垃圾'
          break;
        case 5:
          type = '玻璃'
          break;
        case 6:
          type = '废纸'
          break;
        case 7:
          type = '金属'
          break;
        case 8:
          type = '塑料瓶'
          break;
        default:
          type = '未知'
          break;
      }
      return type
    },
    // 新增垃圾点提交
    succadd (addform) {
      const { VILLAGE_ID: VILLAGE_NO, name: NAME, longitude: LONGITUDE, latitude: LATITUDE, type: TYPE } = addform;
      const url = `${this.$url}/AddRubbishBoxApi`;
      this.$axios({
        url,
        method: 'post',
        data: {
          VILLAGE_NO,
          NAME,
          LOCATION: NAME,
          boxs: this.editbiaog,
          PHOTO: this.ImagePaths,
          LONGITUDE,
          LATITUDE,
          TYPE
        }
      }).then(res => {
        if (res.data.IsSucess) {
          this.$message.success('新增垃圾点成功')
          this.closeDialogAdd('手动')
          this.getListData()
        }
      })
    },
    // 关闭新增垃圾点弹出框
    closeDialogAdd (done) {
      this.editbiaog = []
      this.addform = Object.assign({}, undefined)
      this.editform = Object.assign({}, undefined)
      if (done == '手动') {
        this.addVisible = false
      } else {
        done();
      }
    },
    // 编辑垃圾点
    handleEdit (index, row) {
      // 获取图片
      this.$axios({
        url: `${this.$url}/GetRubbishByIDApi`,
        method: 'get',
        params: {
          ID: row.ID
        }
      }).then(res => {
        console.log(res.data.boxs)
        this.editbiaog = Object.assign([], res.data.boxs)
      })
      this.editform = Object.assign({}, row);
      this.editVisible = true;
    },
    // 编辑垃圾点提交
    succedit (ediform) {
      const { ID, VILLAGE_NO, HOTEL_ID, NAME, LOCATION, boxs, PHOTO, LONGITUDE, LATITUDE, STREET_NAME, UNIT_NAME, VILLAGE_NAME, TYPE } = ediform;
      this.$axios({
        url: `${this.$url}/UpdateRubbishBoxApi`,
        method: 'post',
        data: {
          ID,
          VILLAGE_NO,
          HOTEL_ID,
          NAME,
          LOCATION,
          boxs,
          PHOTO,
          LONGITUDE,
          LATITUDE,
          STREET_NAME,
          UNIT_NAME,
          VILLAGE_NAME,
          TYPE
        }
      }).then(res => {
        if (res.data.IsSucess) {
          this.$message.success('编辑成功')
          this.closeDialogEdit()
          this.getListData()
        }
      })
    },
    // 关闭编辑垃圾点弹出框
    closeDialogEdit (done) {
      this.editbiaog = []
      this.editform = Object.assign({}, undefined)
      if (done) {
        done();
      } else {
        this.editVisible = false
      }
    },
    // 删除垃圾点
    handleDelete (index, row) {
      var url = `${this.$url}/DeleteRubbishBoxApi?ID=${row.ID}`;
      this.$axios({
        url: url,
        method: 'get',
      }).then(res => {
        if (res.status == 200) {
          this.$message.success('删除成功');
          this.tableData.splice(index, 1);
        }
      })
    }
  }
}
</script>
<style scoped>
.el-select {
    width: 100%;
}
/deep/.el-upload__input {
    display: none !important;
}
.wid100 {
    width: 100%;
}
.wid33 {
    width: 33%;
}
.wid48 {
    width: 48%;
}
.line {
  width: 100%;
  height: 2px;
  background: #ccc;
  margin-bottom: 15px;
}
.list-wrap {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);
}
.list-wrap .btn {
  float: right;
  margin: 5px;
}
</style>